<template>
  <div class="current-plus-detail">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">{{ Title }}</x-header>
    </div>
    <div class="dy-body">
      <scroller lock-x height="100%" ref="scroller">
        <div>
          <div class="top-info">
            <div class="top-rate">{{ prdInfo.rate }}</div>
            <div>收益率</div>
          </div>
          <div class="top-option">
            <div v-for="(item, index) in prdInfo.tagList" :key="index">{{ item }}</div>
          </div>
          <div class="e-chart-map">
            <div class="dy-wapper">
              <div class="zx-charts">
                <div id="myChart_0" :style="{width: '100%', height: '4rem'}"></div>
              </div>
            </div>
          </div>
          <div class="time-ragne">
            <div :class="{checked: ischecked === 1}" @click="chooseTimeRange(1)">最近一月</div>
            <div :class="{checked: ischecked === 2}" @click="chooseTimeRange(2)">最近三月</div>
            <div :class="{checked: ischecked === 3}" @click="chooseTimeRange(3)">最近一年</div>
          </div>
          <div class="tip-msg">
            <p>交易规则</p>
            <p>理财计划存续期间，00：00-16：30申购即时生效，当日起息。其他时间下一工作日起息。</p>
            <p>每天00：00-24：00接受赎回委托，0赎回费用。工作日00：00-09：00，本金实时到账，分红9：00后到账。</p>
          </div>
          <div class="bottom-contant">
            <group gutter='0'>
              <cell :title="('产品说明')" @click.native="showPopupPicker1 = true" :value="value1[0]" is-link></cell>
              <cell :title="('公告及风险提示')" @click.native="showPopupPicker2 = true" :value="value2[0]" is-link></cell>
              <popup-picker :show.sync="showPopupPicker1" :show-cell="false" :data="list1" v-model="value1"></popup-picker>
              <popup-picker :show.sync="showPopupPicker2" :show-cell="false" :data="list2" v-model="value2"></popup-picker>
            </group>
          </div>
        </div>
      </scroller>
    </div>
    <div class="dy-footer">
      <div class="buy-button"><x-button type="primary" @click.native="buyClick()">购买</x-button></div>
    </div>
  </div>
</template>

<script>
export default{
  data () {
    return {
      num: '',
      Title: '',
      prdInfo: {},
      value1: ['请选择'],
      list1: [['请选择', '上海市浦东新区', '北京市朝阳区', '北京市大兴区']],
      value2: ['请选择'],
      list2: [['请选择', '企业经理', '技术人员', '服务人员', '其他']],
      showPopupPicker1: false,
      showPopupPicker2: false,
      ischecked: 1,
      dataList1: ['1', '5', '10', '15', '20', '25', '30'],
      dataList2: ['1-1', '1-10', '1-20', '1-30', '2-10', '2-20', '2-30', '3-10', '3-20', '3-30'],
      dataList3: ['18-1', '18-2', '18-3', '18-4', '18-5', '18-6', '18-7', '18-8', '18-9', '18-10', '18-11', '18-12'],
      echartOption: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1', '5', '10', '15', '20', '25', '30']
        },
        yAxis: {
          type: 'value'
        },
        legend: {left: 0, top: 0, bottom: 0, right: 0},
        grid: {left: '30', top: '40rem', bottom: '30', right: 0},
        color: ['#FF6633'],
        series: [
          {
            type: 'line',
            data: [3, 1, 0, 4, 6, 2, 1, 4, 4, 5, 5],
            smooth: true
          }
        ]
      }
    }
  },
  computed: {
    getCurrentPlusInfo () {
      return this.$store.getters.getCurrentPlusInfo
    },
    myChart () {
      return this.$echarts.init(document.getElementById('myChart_0'))
    }
  },
  methods: {
    chooseTimeRange (i) {
      this.ischecked = i
      if (i === 1) {
        this.echartOption.xAxis.data = this.dataList1
      } else if (i === 2) {
        this.echartOption.xAxis.data = this.dataList2
      } else {
        this.echartOption.xAxis.data = this.dataList3
      }
      this.drawLine()
    },
    buyClick () {
      this.$router.push({name: 'CurrentPlusBuy', query: {prdName: this.Title, rate: this.prdInfo.rate}})
    },
    back () {
      this.$publicFun.goBack(this)
    },
    drawLine () {
      this.myChart.setOption(this.echartOption)
      this.myChart.resize()
    }
  },
  mounted () {
    let num = this.$route.query.num
    this.prdInfo = this.getCurrentPlusInfo[num]
    this.Title = this.prdInfo.prdName
    this.drawLine()
  }
}
</script>

<style lang="less">
  .current-plus-detail{
    .dy-body{
      padding-bottom: 1rem;
      .top-info{
        height: 1.7rem;
        background: url('../../../../static/img/main-top-bg.png') no-repeat;
        >div{
          padding-top: 0.2rem;
          text-align: center;
          color: #fff;
        }
        .top-rate{
          font-size: 0.6rem;
          font-weight: bolder;
        }
      }
      .top-option{
        display: flex;
        >div{
          flex: 1;
          border-bottom: 1px solid #DBDBDB;
          text-align: center;
          height: 0.8rem;
          line-height: 0.8rem;
          font-size: 0.3rem;
        }
      }
      .e-chart-map{
        .dy-wapper{
          .zx-charts{
            padding: 0;
          }
        }
      }
      .time-ragne{
        display: flex;
        .checked{
          color: #F28300;
        }
        >div{
          flex: 1;
          border: 1px solid #DBDBDB;
          text-align: center;
          font-size: 0.24rem;
          height: 0.6rem;
          line-height: 0.6rem;
        }
      }
      .tip-msg{
        padding: 0.2rem;
        background: #fff;
        >p{
          font-size: 0.24rem;
        }
      }
      .bottom-contant{
        padding-bottom: 0.6rem;
      }
    }
    .dy-footer{
      position: absolute;
      left: 0;
      bottom: 0;
      overflow: hidden;
      width: 100%;
      .buy-button{
        padding: 0.2rem 0.4rem 0.2rem;
        border-top: .01rem solid #d9d9d9;
        background-color: #fff;
        .weui-btn:after{
          /*border: none;*/
        }
      }
    }
  }
</style>
